<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="用户编号" width="180">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="rolename" label="所属角色"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="slot">
          <el-button size="mini" type="primary" v-if="slot.row.status == 1"
            >启用</el-button
          >
          <el-button size="mini" type="warning" v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary">编辑</el-button>
        <el-button type="warning">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- Element UI:分页  
       page-size:每页要显示的个数，默认为10
       total:总的记录个数
       current-change:用户单击上一页、下一页、当前页触发的事件
    -->
    <el-pagination :page-size="pagesize" background layout="prev, pager, next" :total="total" @current-change="chagepageinfo">
    </el-pagination>
  </div>
</template>

<script>
import { getManageList,getManageNum } from "../../../request/api.js";
import { faileMsg } from "../../../tools/tools.js";

export default {
  mounted() {
    this.getManageInfo();
    this.getTotalManage();
  },
  methods: {
    //重新查询当前页的数据：
    chagepageinfo(curpage){
         this.page = curpage;
         this.getManageInfo();
    },
    //调用管理员总数接口：
    getTotalManage(){
        getManageNum().then(d=>{
            if(d.data.code == 200){
               this.total =  d.data.list[0].total
            }
        })
    },
    //调用管理员列表接口：
    getManageInfo() {
      getManageList({ page: this.page, size: this.pagesize }).then((d) => {
        if (d.data.code == 200) {
          this.tableData = d.data.list;
        } else {
          faileMsg(`管理员列表接口调用失败`);
        }
      });
    },
  },
  data() {
    return {
      tableData: [],
      total:0,//管理员总个数
      pagesize:1, //每页要显示的个数
      page:1,//第几页
    };
  },
};
</script>

<style>
</style>